<template>
  <div class="search">
    <van-nav-bar
      title=""
      right-text="搜索"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    <div slot="title">
      <input type="text" v-model="searchName" placeholder="请输入商品名"/>
    </div>
    </van-nav-bar>
    <div class="history" v-show="show">
      <span>历史搜索</span>
      <van-icon name="delete-o" size="20" style="float: right;" @click="del"/>
    </div>
    <div class="searchText">
      <span v-for="(item,index) in history" :key='index' @click="textClick(item.href)" >{{item.text}}</span>
    </div>

    <div class="hotSearch">
      <span>热门搜索</span>
      <span style="float: right;">隐藏</span>
    </div>
  </div>
</template>

<script>
  export default{
    name:'Search',
    data() {
      return {
        searchName:'',
        history:[],
        show:false
      }
    },

    created() {
      this.getSearchHistory()
    },

     methods: {
       /**
        * 点击返回
        */
        onClickLeft() {
          this.$router.go(-1)
        },

        /**
         * 历史搜索
         */
        getSearchHistory() {
          let history = window.localStorage.getItem('searchHistory')
          this.history = JSON.parse(history)
          if(this.history !== null){
            this.show = true
          }
        },

        /**
         * 点击搜索
         */
        onClickRight() {
          let data = [
            {
              href:`/goods/list?keyword=${this.searchName}`,
              text:this.searchName
            }
          ]
          let history = window.localStorage.getItem('searchHistory')
          //本地有数据
          if(history){
            //解析JSON为数组
            history = JSON.parse(history)
            //合并数据
            history = history.concat(data)
            window.localStorage.setItem('searchHistory',JSON.stringify(history))
          }else{
            //本地没有数据
            window.localStorage.setItem('searchHistory',JSON.stringify(data))
          }
          this.$router.push(data[0].href)
        },
        /**
         * 删除
         */
        del() {
          // this.show = true
          this.$dialog.confirm({
                   title: "确定删除",
                   confirmButtonText: "确认", //改变确认按钮上显示的文字
                   cancelButtonText: "取消" //改变取消按钮上显示的文字
          }).then(()=> {
                    window.localStorage.removeItem('searchHistory')
                    this.getSearchHistory()
                    this.show = false
          }).catch(() => {
            
          })
        },
        // 搜索文字点击
        textClick(href){
          this.$router.push(href)
        }
      },
  }


</script>

<style>
  .search input{
    width: 10rem;
    border-radius: 80px;
  }
  .history,.hotSearch{
    margin: 0 auto;
    width: 90%;
    line-height: 50px;
    font-size: 30px;
  }
  .searchText{
    font-size: 30px;
    padding: 10px 35px;
    white-space: wrap;
  }
  .searchText span{
    margin-right: 10px;
    background-color: #D8D8D8;
  }

  /* 弹出框 */
  .search .van-overlay{
    background-color: rgba(0,0,0,.5);
  }
</style>
